<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			
			
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">选项卡切换+下拉刷新</h1>
		</header>
		<div class="mui-content">
			<nav class="mui-bar mui-bar-tab">
			    <a class="mui-tab-item mui-active" id="butOne" href="#item1mobile">
			        <span class="mui-icon mui-icon-home"></span>
			        <span class="mui-tab-label">首页</span>
			    </a>
			    <a class="mui-tab-item" id="butTwo"  href="#item2mobile">
			        <span class="mui-icon mui-icon-phone"></span>
			        <span class="mui-tab-label">电话</span>
			    </a>
			    <a class="mui-tab-item"  id="butThree" href="#item3mobile">
			        <span class="mui-icon mui-icon-email"></span>
			        <span class="mui-tab-label">邮件</span>
			    </a>
			    <a class="mui-tab-item" id="butFour" href="#item4mobile">
			        <span class="mui-icon mui-icon-gear"></span>
			        <span class="mui-tab-label">设置</span>
			    </a>
			</nav>
			
			<div id="slider" class="mui-slider mui-fullscreen">
				<!--<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile">
							娱乐
						</a>
						<a class="mui-control-item" href="#item6mobile">
							科技
						</a>
					</div>
				</div>-->
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper" style="bottom: 50px;">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="appHome">
									 <!-- 主界面具体展示内容 -->
									 <div class="mui-slider" style="height:200px">
									  <div class="mui-slider-group">
									    <div class="mui-slider-item"><a href="#"><img src="images/cbd.jpg" /></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="images/muwu.jpg" /></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="images/shuijiao.jpg" /></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="images/timg.jpg" /></a></div>
									  </div>
									</div>
								 
				
							        <ul class="mui-table-view mui-grid-view mui-grid-9">
								        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
								            <a href="html/pay/topay.html">
								                <span class="mui-icon mui-icon-home"></span>
								                <div class="mui-media-body">Home</div>
								            </a>
								        </li>
								        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
								            <a href="#">
								                <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
								                <div class="mui-media-body">Email</div>
								            </a>
								        </li>
								        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
								            <a href="#">
								                <span class="mui-icon mui-icon-chatbubble"></span>
								                <div class="mui-media-body">Chat</div>
								            </a>
								        </li>
								        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
								            <a href="#">
								                <span class="mui-icon mui-icon-location"></span>
								                <div class="mui-media-body">Location</div>
								            </a>
								        </li>
								        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
								            <a href="#">
								                <span class="mui-icon mui-icon-search"></span>
								                <div class="mui-media-body">Search</div>
								            </a>
								        </li>
								        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="butphone">
								            <a href="#">
								                <span class="mui-icon mui-icon-phone"></span>
								                <div class="mui-media-body">Phone</div>
								            </a>
								        </li>
							        </ul>
			        
								
								<!--
									<li class="mui-table-view-cell">
										第1个选项卡子项-1
									</li>
								-->
									<li class="mui-table-view-cell mui-media" ival="1" v-for="prd in rsPrds">
						                <a href="javascript:;">
						                    <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
						                    <div class="mui-media-body">
						                        {{prd.goods_name}}
						                        <p class="mui-ellipsis">{{prd.item_name}}</p>
						                    </div>
						                </a>
						            </li>
									
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第2个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-3
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-4
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-5
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-6
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-7
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-8
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-9
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-10
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-11
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-12
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-13
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-14
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-15
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-16
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-17
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-18
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-19
									</li>
									<li class="mui-table-view-cell">
										第2个选项卡子项-20
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第3个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-3
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-4
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-5
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-6
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-7
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-8
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-9
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-10
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-11
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-12
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-13
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-14
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-15
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-16
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-17
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-18
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-19
									</li>
									<li class="mui-table-view-cell">
										第3个选项卡子项-20
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第4个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-3
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-4
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-5
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-6
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-7
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-8
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-9
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-10
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-11
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-12
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-13
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-14
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-15
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-16
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-17
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-18
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-19
									</li>
									<li class="mui-table-view-cell">
										第4个选项卡子项-20
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="js/tools.js"></script>
		<script>
			
		mui.init({
			pullRefresh: {
				container: '#scroll1',
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		
		function pullupRefresh() 
		{
			setTimeout(function() 
			{
				//alert(theVue.iCurPageNo);
				mui('#scroll1').pullRefresh().endPullupToRefresh((theVue.iCurPageNo >= theVue.m_iPageCount)); //参数为true代表没有更多数据了。
				if(theVue.iCurPageNo <= theVue.m_iPageCount)
				{
					theVue.loadPrds();
				}
			}, 1500);
		}
			
			(function($) 
			{	//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				
				mui('.mui-bar-tab').on('tap', 'a', function()
				{
					//var targetTab = this.getAttribute('href');
					//更换标题
					document.getElementById("title").innerHTML = this.querySelector('.mui-tab-label').innerHTML;
						
				});
			})(mui);
			
//				$.ready(function() 
//				{

//
//				});

		</script>
		
		<script>
		
	var g_iConstPageSize = 15;
	var theVue = new Vue(
	{
	  el: '#appHome',
	  created:function()
	  {
	  	this.loadPrds();
	  },
	  data: {
	  	iCurPageNo:1,
	  	m_iPageCount:1,
	    rsPrds:[]
	  },
	  methods:
	  {
		  loadPrds:function()
		  {
			  var jData = {
					curPage:this.iCurPageNo,
					pageSize:g_iConstPageSize,
					qryName:'',
					userid:'root'
				};
	
				var thePrds = this;
				
				mui.post(g_SrvUrl+'/zdm/GoodsFactory/GoodList',
				JSON.stringify(jData),
				function(data)
				{
					//alert(data.RecCount);
					if(data.RecCount%g_iConstPageSize==0) 
					{
						thePrds.m_iPageCount = data.RecCount/g_iConstPageSize;
					}
					else
					{
						thePrds.m_iPageCount = parseInt(data.RecCount/g_iConstPageSize)+1;
					}
					//alert(thePrds.m_iPageCount);
					
					for(var i=0;i<data.Recs.length;i++)
					{
						thePrds.rsPrds.push(data.Recs[i]);
					}
					thePrds.iCurPageNo++;
					
				},'json');

		  }
	  }
	});

	</script>
	</body>

</html>